
<template>
    <div class="right">
        <div class="right_body">
            <div class="right_body_list" id="right_body_list">
                <div class="list_title">
                    <span class="xu_hao">序号</span>
                    <span v-for="item in hagnqingtitle" :key="item.Type" :style="{ width: item.Minwidth + 'px' }">{{
                        item.Title }}</span>
                </div>
                <div class="list_list" v-for="(item, index) in hagnqingData" :key="item.heyue_id" @click="selectTap(item)"
                    @dblclick="navChart">
                    <span class="xu_hao yellow" :class="{ active: storeMain.selectHeyue?.heyue_id == item.heyue_id }">
                        <i class="iconfonMy icon-arrowTop red" v-if="item.currentPrice > item.settlementYes"></i>
                        <i class="iconfonMy icon-arrowBottom green" v-if="item.currentPrice < item.settlementYes"></i>
                        {{ index + 1 }}
                    </span>
                    <span v-for="(ci, idx) in hagnqingtitle" :key="ci.Type"
                        :class="[item?.childrenData[idx]?.color, { active: storeMain.selectHeyue?.heyue_id == item.heyue_id }]"
                        :style="{ width: ci.Minwidth + 'px' }">{{
                            item.childrenData[idx]?.val }}
                        <i class="zhu_bz_type" v-if="ci.Type == 2 && item.zhu_bz == 1">M</i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import moment from 'moment'
import { ref, computed } from 'vue';
// const { ipcRenderer } = require('electron');
import { mainStore, chartStore } from '@/store/index.js';
import bus from '@/utils/bus.js'

moment.locale("zh-cn");

const storeMain = mainStore();
const storeChart = chartStore();

const hagnqingData = computed(() => {
    if (!storeChart.hqData) return []
    let arrList = Object.values(storeChart.hqData)
    let arr = arrList.map(item => {
        let childrenData = [
            { val: item.heyue_name || '----', color: 'yellow' },
            { val: item.buy1 || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.seller1 || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.buyVol1 || '----', color: 'yellow' },
            { val: item.sellingVol1 || '----', color: 'yellow' },
            { val: item.volume || '----', color: 'yellow' },
            { val: item.nowUpw || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.nowGain || '----', color: item.nowGain > 0 ? 'red' : item.nowGain < 0 ? 'green' : 'yellow' },
            { val: item.inventory || '----', color: 'yellow' },
            { val: item.rizeng || '----', color: 'yellow' },
            { val: item.openingToday || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.highestPrice || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.lowestPrice || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.currentPrice || '----', color: '' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: '----' || '----', color: '' },
            { val: '----' || '----', color: item.nowGain > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: item.nowGain > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: item.heyue_danwei || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: item.heyue_bh || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
        ]
        item.childrenData = childrenData
        if (storeChart.selectBodyListbottom == '主力合约') {
            if (item.zhu_bz == 1) {
                if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    return item
                }
            } else {
                return false
            }
        } else if (storeChart.selectBodyListbottom == '全部') {
            if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                return false
            } else {
                return item
            }
        } else {
            if (storeChart.selectBodyListbottom == '删除合约') {
                if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                    return item
                } else {
                    return false
                }
            } else if (storeChart.selectBodyListbottom == '隐藏合约') {
                if (storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                        return item
                    } else {
                        return false
                    }
                }
            }
            else {
                if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                        return item
                    } else {
                        return false
                    }
                }
            }
        }
    })
    arr = arr.filter(item => item)
    arr.sort((a, b) => {
        if (a.shichang_name < b.shichang_name) return -1;
        if (a.shichang_name > b.shichang_name) return 1;

        // 如果交易所相同，按品种排序
        if (a.heyue_bh < b.heyue_bh) return -1;
        if (a.heyue_bh > b.heyue_bh) return 1;

        // 如果交易所和品种都相同，按编号排序
        return a.heyue_id - b.heyue_id;
    });
    return arr
});


const hagnqingtitle = ref([
    { Type: 2, Title: "合约名称", Minwidth: 90 },
    { Type: 5, Title: "买价", Minwidth: 70 },
    { Type: 6, Title: "卖价", Minwidth: 70 },
]);


const selectTap = async (obj) => {
    await storeMain.changeHeyueinfo(obj)
    await storeChart.setSelectBodyListHeyueTable(storeChart.hqData)
    await storeChart.changeSelectbodyChartListTab(storeChart.selectbodyChartListTab)
    let changeKlineAPiVal = storeChart.selectbodyChartListTab == '分时图' ? '分时' : 'K线'
    await storeChart.getTradetimeList('tradetime', { contract_id: storeMain.selectHeyue.heyue_id });
    bus.emit('changeHeadApiVal', { type: changeKlineAPiVal })
    // storeChart.changeBodyType('chart')
    // if (storeChart.selectbodyChartListTab == '分时图') {
    //     storeChart.changeKlineAPiVal('分时')
    //   
    // } else {
    //     storeChart.changeKlineAPiVal('K线')
    //     bus.emit('changeHeadApiVal', { type: 'K线' })
    // }


}
</script>

<style lang="scss" scoped>
.red {
    color: #ff3c3c;
}

.green {
    color: #00dc00;
}

.yellow {
    color: #dcdc0a;
}

.right {
    position: relative;
    width: 100%;
    padding: 2px;
    height: 100%;
    border-right: 1px #ff3c3c solid;

    .right_body {
        height: calc(100% - 26px);
        position: relative;
        font-size: 14px;
        width: 100%;

        .right_body_list {
            overflow: scroll;
            height: 100%;

            .list_title {
                background-color: #000;
                color: #00cbcb;
                white-space: nowrap;
                position: sticky;
                top: 0;
                text-align: right;
                z-index: 20;

                span {
                    background-color: #000;
                    display: inline-block;
                    border-bottom: 1px solid #800e07;
                    height: 25px;
                    line-height: 25px;
                }

                .xu_hao {
                    background-color: #000;
                    position: sticky;
                    left: 0;
                    width: 52px;
                    height: 25px;
                    line-height: 25px;
                }

                .empty {
                    color: transparent;
                    height: 25px;
                    width: 60px;
                }
            }

            .list_list {
                white-space: nowrap;
                text-align: right;
                height: 28px;
                line-height: 28px;

                span {
                    display: inline-block;
                    border-bottom: 1px solid transparent;
                    border-top: 1px solid transparent;
                    height: 28px;
                    line-height: 28px;
                    font-size: 16px;
                    position: relative;

                    .zhu_bz_type {
                        font-size: 12px;
                        position: absolute;
                        top: -3px;
                        right: -16px;
                        color: #b63322;
                    }
                }

                .active {
                    border-color: #800e07;
                }

                .xu_hao {
                    background-color: #000;
                    position: sticky;
                    left: 0;
                    width: 52px;
                    height: 28px;
                    line-height: 28px;
                    z-index: 10;
                }

                .empty {
                    color: transparent;
                    height: 28px;
                    width: 60px;
                }
            }

        }


        .icon {
            position: absolute;
            top: -0;
            padding-right: 10px;
            padding-top: 4px;
            overflow: hidden;
            height: 25px;
            z-index: 200;

            i {
                display: inline-block;
                color: #b4b408;
                transform: rotateZ(90deg);
            }
        }

        .icon1 {
            right: 0;
        }

        .icon2 {
            left: 0;

            i {
                transform: rotateZ(-90deg);
            }
        }
    }

    .botton {
        background-color: #181a1d;
        display: flex;
        align-items: center;
        line-height: 26px;
        height: 26px;
        padding: 0 20px;

        span {
            padding: 0 10px;
        }

        .active {
            color: #ba5c20;
            background-color: #23262a;
        }
    }
}
</style>
